<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>在一起！！在一起</title>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=medium-dpi" />
	<!-- Bootstrap 3.3.4 -->
	<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<!-- Font Awesome Icons -->
	<link href="/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" >

	<link href="/css/AdminLTE.css" rel="stylesheet" type="text/css" />
	<!-- Socket.Io.js -->
	<script src="/socket.io/socket.io.js"></script>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<script>
var $USER = {};

$USER['openid']         = '<%= fans.openid %>';
$USER['subscribe']      = <%=fans.subscribe%>;
$USER['nickname']       = '<%=fans.nickname%>';
$USER['sex']            = <%=fans.sex%>;
$USER['province']       = '<%=fans.province%>';
$USER['country']        = '<%=fans.country%>';
//weixin 默认头像是0 64*64 加载小头像
$USER['headimgurl']     = "<%=fans.headimgurl.replace(/0$/,'64')%>";
$USER['subscribe_time'] = <%=fans.subscribe_time%>;

</script>

<body class="skin-blue sidebar-mini">

    <div class="container-fluid">

		<div class="row">

			<div class="box box-warning direct-chat direct-chat-warning">
				<div class="box-header with-border">
					<h3 class="box-title">爱的祝福</h3>
					<div class="box-tools pull-right">
						<span class="label label-warning"><%= msgCount %> Total Messages</span>
					</div>
				</div><!-- /.box-header -->
				<div class="box-body chat">
					<div class='loading-box' style='display:none' >
						<p class='text-center' style="font-size:12px;"><i class="fa fa-refresh"></i> 加载中...</p>
					</div>
					<%for (var i = msgData.length-1; i >= 0;  i--) { %>
					<div class="item" data-objectid=<%=msgData[i]._id%> >
						<img src="<%= msgData[i].fans.headimgurl.replace(/0$/,'64') %>">
						<p class="message">
							<a class="name" href="#"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> <%= moment(msgData[i].created_at*1000).fromNow(); %></small><%= msgData[i].fans.nickname %></a>
						</p>
						<div class="direct-chat-text">
							<%= msgData[i].message %>
						</div>
					</div>
					<% } %>

				</div><!-- /.box-body -->

				<div class="box-footer">
					<form action="#" method="post">
						<div class="input-group">
							<input type="text" name="message" placeholder="留下祝福吧，亲..." class="form-control"/>
							<span class="input-group-btn">
								<button type="submit" class="btn btn-warning btn-flat">发送</button>
							</span>
						</div>
					</form>
				</div><!-- /.box-footer-->
		</div><!-- /.row -->

		</div><!-- /.container -->
    </div><!-- ./wrapper -->
    <!-- jQuery 2.1.4 -->
    <script type='text/javascript' src='/jQuery/jQuery-2.1.4.min.js' /></script>
    <!-- Bootstrap 3.3.2 JS -->
	<script type='text/javascript' src='/bootstrap/js/bootstrap.min.js' /></script>

	<script>
	var socket = io();

	$('form').submit(function(){
		var param = {
			openid:$USER['openid'],
			msgText:$('input[name=message]').val()
		}
		param = JSON.stringify(param);

		//var param = '{"openid":'+$USER['openid'],'code':''}';
		socket.emit('send msg', param);
		$('input[name=message]').val('');
		return false;
	});

	socket.on('send msg', function(clientParam){
		var avatarImg = document.createElement('img');
		$(avatarImg).attr('src',clientParam.headimgurl);

		var msgSender = document.createElement('p');
		$(msgSender).attr('class','message');
		$(msgSender).html('<a class="name" href="#"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 几秒前</small>'+clientParam.nickname+'</a>')
		var msgBox = document.createElement('div');
		$(msgBox).attr('class','direct-chat-text');
		$(msgBox).text(clientParam.msgText);

		var msgItem = document.createElement('div');
		$(msgItem).attr('class','item');

		$(msgItem).append(avatarImg);
		$(msgItem).append(msgSender);
		$(msgItem).append(msgBox);

		$('.box-body').append(msgItem);
	});

	var stop=true;
	$(document).ready(function() {
		$(window).scroll(function() {
			//$(document).scrollTop() 获取垂直滚动的距离
			//$(document).scrollLeft() 这是获取水平滚动条的距离
			if (stop && $(document).scrollTop() < -30) {
				//alert(1);
				$('.loading-box').show();
				var param = {
					_id : $('.item:first').attr('data-objectid'),
				}

				stop = false;
				/*
				window.setTimeout(doemit(param),2800);
				function doemit(param){
					socket.emit('load more', param);
				}*/

				$.ajax({
					url : '/loadmore',
					dataType : 'json',
					data:param,
					complete :function(){$('.loading-box').hide();},
					success : function(msgData) {
						//alert(msgData);

						if(msgData){
							var itemtpl = getItemTpl(msgData);

							$('.loading-box').after(itemtpl);
							stop=true;
							$(document).scrollTop(600);
						}

					}
				})

			}
		});

	});

	socket.on('load more', function(msgData){
		$('.loading-box').hide();
		stop = true;

		if(msgData){

			var itemtpl = getItemTpl(msgData);

			$('.loading-box').after(itemtpl);
		}
	})

	function getItemTpl(msgData){

		var i;
		var itemTpl='';

		for(i = msgData.length-1; i >=0 ; i--){
			itemTpl += "<div class=\"item\" data-objectid="+msgData[i]._id+" >";
			itemTpl += "<img src=\""+msgData[i].fans.headimgurl.replace(/0$/,'64')+"\">";
			itemTpl += "<p class=\"message\">";
			itemTpl += "<a class=\"name\" href=\"#\"><small class=\"text-muted pull-right\"><i class=\"fa fa-clock-o\"></i> 几秒前</small>"+ msgData[i].fans.nickname +"</a>";
			itemTpl += "</p>";
			itemTpl += "<div class=\"direct-chat-text\">"+msgData[i].message+"</div>";
			itemTpl += "</div>";
		}

		return itemTpl;
	}

	</script>

	</body>
</html>
